<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/web.js"></script>
<script type="text/javascript" src="js/web1.js"></script>
<script type="text/javascript" src="js/web2.js"></script>
<title>前台主界面</title>
<style>
/*头部商品索引*/
.header-wrap {
	background-color: #fff;
}

.navwrap {
	background: #9b0000 url("images/nav-bg.jpg") repeat-x;
	height: 36px;
	border-top: 1px #9c1900 solid;
	border-bottom: 1px #8a1501 solid;
	box-shadow: 0 1px 2px #999;
	-webkit-box-shadow: 0 1px 2px #999;
	-moz-box-shadow: 0 1px 2px #999;
}

#nav {
	height: 36px;
	width: 92%;
	margin: 0 auto;
	position: relative;
	padding: 0;
	z-index: 99
}

.navbar {
	height: 36px;
	padding-left: 210px;
	position: relative;
	left: 10px;
}

.navbar a {
	float: left;
	width: auto;
	text-align: center;
	height: 36px;
	line-height: 36px;
	color: #fff;
	padding: 0 15px;
	text-decoration: none;
	font-size: 15px;
	font-family: "\5FAE\8F6F\96C5\9ED1";
	white-space: nowrap;
	border-right: 1px #931900 solid;
	border-left: 1px #a52600 solid;
	position: relative;
}

.navbar a.first {
	border-left: 0 none
}

.navbar a.last {
	border-right: 0 none
}

.navbar a:hover {
	background-color: #8d1e01;
	color: #fff
}

.navbar a.current {
	background-color: #6c1500;
	border-right: 1px #6c1500 solid;
	box-shadow: 0 0 10px #4f0000 inset;
	-webkit-box-shadow: 0 0 10px #4f0000 inset;
	-moz-box-shadow: 0 0 10px #4f0000 inset;
}

.navbar a:hover {
	text-decoration: none
}

.navbar a.current:hover {
	color: #fff
}

.navbar .navbt {
	width: 105px;
	height: 30px;
	position: absolute;
	top: 3px;
	right: 95px;
	background: url("images/navbt.jpg") no-repeat;
	border: 0 none;
	float: none;
	font-size: 14px;
	line-height: 30px;
	padding: 0;
}

a.navbt span {
	background: url("images/iconmap.jpg") no-repeat 1px 3px;
	padding-left: 18px;
}

.navbar a.navbt:hover {
	background: transparent url("images/navbt-hover.jpg") no-repeat
}

.navbar a.navbt:hover span {
	background-image: url("images/iconmap-hover.jpg")
}

.pros {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000;
	width: 210px;
	background-color: #d03322;
	margin-left: 10px;
}

.pros h2 {
	width: 194px;
	height: 37px;
	line-height: 37px;
	color: #fff;
	padding-left: 16px;
	font-size: 16px;
	font-weight: 400;
	font-family: "\5FAE\8F6F\96C5\9ED1"
}

.subpage h2 {
	background: url("images/icon-dropdown.jpg") no-repeat 122px center;
	cursor: pointer;
}

.subpage .prosul {
	display: none
}

.prosul {
	padding-left: 3px;
	width: 207px;
	margin-top: 2px;
	_overflow: hidden;
	height: 380px;
}

.prosul li, .prosul i {
	background: url("images/iconcatg.png") no-repeat;
}

li.food {
	background-position: 10px 15px
}

li.enjoy {
	background-position: 10px -35px
}

li.life {
	background-position: 10px -135px
}

li.travel {
	background-position: 10px -185px
}

li.goods {
	background-position: 10px -235px
}

.prosul li {
	line-height: 50px;
	height: 50px;
	_overflow: hidden;
	border-bottom: 1px #bb2d1e dashed;
	margin-right: 3px;
	padding-left: 38px
}

.prosul li.prosahover {
	border-bottom: 1px #fff solid;
	background-color: #fff;
	margin-right: 0;
	padding-right: 3px;
}

.prosul a {
	color: #ffd0c0;
	padding-right: 8px;
	_padding-right: 6px;
	white-space: nowrap;
	display: inline-block;
	height: 50px
}

.prosul a.hot {
	background: url("images/icon-hot.png") right 8px no-repeat;
	text-decoration: none;
}

.prosul li.prosahover a.hot {
	background-image: url("images/icon-hot-hover.png")
}

.prosul li.prosahover a {
	color: #636363
}

.prosul li a.ti {
	font-size: 14px;
	font-family: "\5FAE\8F6F\96C5\9ED1";
	color: #fff;
	text-decoration: none;
}

.prosul li.prosahover a.ti {
	color: #d03322;
}

.prosul li a:hover {
	color: #d03322;
}

.prosul li.nochild a:hover {
	color: #fff;
}

.prosul li i {
	float: right;
	display: block;
	width: 3px;
	height: 50px;
	text-indent: -999em;
	background-position: 0 -276px;
	padding-right: 12px
}

.prosul li.prosahover i {
	background-position: 0 -326px
}

.prosul li.last {
	border-bottom: 0 none
}

.prosul li.bd-solid {
	border-bottom: 1px #c22900 solid
}

.prosul li.hotareas {
	background-image: none;
	padding-left: 12px;
	line-height: 26px;
	height: 106px;
	*overflow: hidden
}

.prosul li.hotareas i {
	line-height: 30px;
	margin-top: -2px;
	height: 40px;
	background-position: 0 -279px
}

.prosul li.hotareas a {
	line-height: 30px;
	height: 30px
}

.prosul li.hotareas a.hot {
	background-position: right 0
}

.prosul li h2 {
	padding-left: 0;
	line-height: 40px;
	display: inline;
	font-size: 14px;
	font-weight: 400;
}

.prosul li.prosahover h2 {
	color: #d03322;
}

.prosmore {
	padding: 15px 0 15px 15px;
	position: absolute;
	z-index: 999;
	left: 210px;
	top: 38px;
	background-color: #fff;
	border: 2px #d03322 solid;
	border-left: 0 none;
	width: 240px;
	height: 340px;
}

.prosul .prosmore {
	text-align: left;
}

.prosul .prosmore span {
	float: left;
	height: 36px;
	width: 106px;
	line-height: 22px;
}

.prosul li .prosmore a {
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
}

.prosul li .prosmore a:hover {
	background-color: #d03322;
	color: #fff;
}

.prosmore em {
	font-weight: 400;
	padding-top: 9px;
	display: inline-block;
}

.prosmore em.morehot {
	background: url("images/icon-hot-more.png") right top no-repeat;
	padding-right: 22px;
}

.mhs {
	text-decoration: none;
	font-size: 12px;
}

</style>
</head>
<body style="min-width: 980px;">
	<div id=”main_top“>
		<jsp:include page="headarea.jsp"></jsp:include>
	</div>
	<div class="header_wrap">
		<div class="navwrap">
			<div id="nav">
				<div class="navbar clearfix">
					<a class="navbt" href="#"><span>团购地图</span></a> <a class="current"
						href="menu_listservlet">首页</a> <a href="Close_List">衣服</a> <a href="Shose_List">鞋靴</a>
					<a href="Pant_List">裤子</a>
				</div>
				<div class="pros subpage">
					<h2>所有商品分类</h2>
					<ul class="prosul clearfix" id="proinfo" style="display: block;">
						<li class="goods bd-solid"><i>&gt;</i> <a class="ti" href="#">服装</a>
							<a href="#" style="text-decoration: none;">短袖</a> <a href="#"
							style="text-decoration: none;">外套</a>
							<div class="prosmore hide">
								<span><em><a href="#">全部(112343)</a> </em></span> <span><em
									class="morehot"><a class="morehot" href="#">服装(32747)</a></em></span>
								<span><em><a href="#">T-shirt(14441)</a> </em></span> <span><em><a
										href="#">户外服装(12707)</a></em></span> <span><em><a href="#">休闲鞋(7621)</a>
								</em></span> <span><em><a href="#">运动服(3775)</a> </em></span> <span><em><a
										href="#">高跟鞋(11686)</a> </em></span> <span><em><a href="#">运动鞋(4558)</a>
								</em></span> <span><em><a href="#">寸衫(1482)</a></em></span> <span><em><a
										href="#">短靴(777)</a> </em></span> <span><em><a href="#">打底裤(7)</a></em></span>
								<span><em><a href="#">女仔裤(197)</a> </em></span> <span><em><a
										href="#">其他(4931)</a> </em></span>
							</div></li>
						<li class="food"><i>&gt;</i> <a class="ti" href="#">鞋靴</a> <a
							class="hot" href="#">长靴</a> <a href="#"
							style="text-decoration: none">短靴</a>
							<div class="prosmore hide">
								<span><em><a href="#">全部(117)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">长筒靴(17)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">短筒靴(16)</a></em></span> <span><em><a
										href="#">帆布鞋(9)</a></em></span> <span><em><a href="#">单鞋(37)</a></em></span>
								<span><em><a href="#">运动鞋(5)</a></em></span> <span><em><a
										href="#">马丁靴(2)</a></em></span> <span><em><a href="#">高帮鞋(2)</a></em></span>
								<span><em class="morehot"><a class="morehot"
										href="#">小白鞋(9)</a></em></span> <span><em><a href="#">商务鞋(7)</a></em></span>
								<span><em><a href="#">板鞋(5)</a></em></span> <span><em><a
										href="#">其他(8)</a></em></span>
							</div></li>
						<li class="enjoy"><i>&gt;</i> <a class="ti" href="#">裤子</a> <a
							class="hot" href="#">长裤</a> <a href="#"
							style="text-decoration: none;">其他</a>
							<div class="prosmore hide">
								<span><em><a href="#">全部(663)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">打底裤(18)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">牛仔裤(8)</a></em></span> <span><em><a
										href="#">哈伦裤(95)</a></em></span> <span><em><a href="#">半身裙(48)</a></em></span>
								<span><em><a href="#">连衣裙(13)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">破洞裤(8)</a></em></span> <span><em><a
										href="#">套装群(11)</a></em></span> <span><em><a href="#">阔腿裤(29)</a></em></span>
								<span><em><a href="#">铅笔裤(2)</a></em></span> <span><em><a
										href="#">九分裤(4)</a></em></span> <span><em><a href="#">其他(427)</a></em></span>
							</div></li>
						<li class="travel"><i>&gt;</i> <a class="ti" href="#">休闲</a>
							<a class="hot" href="#">酒店</a> <a href="#"
							style="text-decoration: none;">旅游</a>
							<div class="prosmore hide">
								<span><em><a href="#">全部(13602)</a></em></span> <span><em
									class="morehot"><a class="morehot" href="#">酒店(9044)</a></em></span> <span><em><a
										href="#">旅游(1775)</a></em></span> <span><em><a href="#">景点公园(935)</a></em></span>
								<span><em><a href="#">其他(1848)</a></em></span>
							</div></li>
						<li class="life"><i>&gt;</i> <a class="ti" href="#">生活</a> <a
							href="#" style="text-decoration: none;">摄影</a> <a href="#"
							style="text-decoration: none;">写真</a>
							<div class="prosmore hide">
								<span><em><a href="#">全部(333)</a></em></span> <span><em><a
										href="#">写真(9)</a></em></span> <span><em class="morehot"><a
										class="morehot" href="#">婚纱摄影(212)</a></em></span> <span><em><a
										href="#">儿童摄影(1)</a></em></span> <span><em><a href="#">汽车养护(3)</a></em></span>
								<span><em><a href="#">教育培训(91)</a></em></span> <span><em><a
										href="#">体检(8)</a></em></span> <span><em><a href="#">口腔(1)</a></em></span>
								<span><em><a href="#">其他(8)</a></em></span>
							</div></li>
						<li class="hotareas nochild last">
							<h2>热门搜索</h2> <br /> <a class="mhs" href="#">美食</a> <a
							class="mhs" href="#">游泳</a> <a class="mhs" href="#">蛋糕</a> <a
							class="mhs" href="#">电影</a> <a class="mhs" href="#">眼镜</a> <a
							class="mhs" href="#">自助餐</a> <a class="mhs" href="#">酒吧</a> <a
							class="mhs" href="#">美甲</a> <a class="mhs" href="#">酒店</a> <a
							class="mhs" href="#">粽子</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		(function() {
			var $subblock = $(".subpage"), $head = $subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul
					.find("li"), inter = false;
			$head.click(function(e) {
				e.stopPropagation();
				if (!inter) {
					$ul.show();
				} else {
					$ul.hide();
				}
				inter = !inter;
			});
			$ul.click(function(event) {
				event.stopPropagation();
			});
			$(document).click(function() {
				$ul.hide();
				inter = !inter;
			});
			$lis.hover(function() {
				if (!$(this).hasClass('nochild')) {
					$(this).addClass("prosahover");
					$(this).find(".prosmore").removeClass('hide');
				}
			}, function() {
				if (!$(this).hasClass('nochild')) {
					if ($(this).hasClass("prosahover")) {
						$(this).removeClass("prosahover");
					}
					$(this).find(".prosmore").addClass('hide');
				}
			});
		})();
	</script>
	<div class="div1">
		<div class="wrap" id="wrap">
			<ul id="pic">
				<li><img src="images/1.jpg" alt=""></li>
				<li><img src="images/2.jpg" alt=""></li>
				<li><img src="images/3.jpg" alt=""></li>
				<li><img src="images/4.jpg" alt=""></li>
				<li><img src="images/5.jpg" alt=""></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
	</div>
	<div class="AreaL">
		<div id="mallNews" class="  box_1">
			<h3>
				<span>品牌推荐</span>
			</h3>
			<div class="NewsList tc  " style="border-top: none">
				<ul>
					<li><a>茶花品牌服装</a></li>
					<li><a href="Close_List">索尔偌品牌</a></li>
					<li><a href="Pant_List">心居客品牌</a></li>
					<li><a href="Shose_List">乐町品牌</a></li>
					<li><a></a></li>
				</ul>
			</div>
		</div>
		<div class="blank"></div>
	</div>
	<div class="Arear">
		<div class="sale_box clearfix" style="height: 346px;">
			<h3>
				<span>茶花品牌</span>
			</h3>
			<div class="clearfix">
			   <c:forEach items="${list}" var="list">
				   <ul class="clearfix">
					  <li class="goodsimg">
					      <a href="commdity_servlet?cId=${list.cId }"> <img src="${list.uiImage } "border="1" alt="条纹短袖" class="B_blue" />
					  </a>
					</li>
					 <li>
						<a href="" title="条纹短袖"
								style="font-size:14px;">${list.cName }</a>
						<br />
						<span style="font-size: 14px;margin-top:25px;">售价：<font class="f1">￥${list.dPrice}</font></span>
					 </li>
				  </ul>
				</c:forEach>
			</div>
		</div>
		<div class="blank" style="height: 1px;"></div>
	</div>
	<div class="goodsBox_1">
		<div class="xm-box">
			<h4 class="title">
				<span>索尔偌品牌</span> <a class="more" href="search.php?intro=new">更多</a>
			</h4>
			<div id="show_new_area" class="clearfix">
			   <c:forEach items="${list1 }" var="list1">
				<div class="goodsItem">
					<a href="commdity_servlet?cId=${list1.cId }" ><img src="${list1.uiImage}"
						alt="韩版平底靴女" class="goodsimg" /></a><br />
						<a href="commdity_servlet?cId=${list1.cId }" title="平底靴女" style="font-size:14px;">${list1.cName }</a>
					     <br /><span style="font-size:14px;margin-top:25px;"> 售价：</span><font class="f1">￥${list1.dPrice}</font>
				</div>
				</c:forEach>
			</div>
		</div>
		<div class="blank"></div>
		<div class="xm-box">
			<h4 class="title">
				<span>心居客品牌</span> 
				<a class="more" href="search.php?intro=new">更多</a>
			</h4>
			<div id="show_new_area" class="clearfix">
			  <c:forEach items="${list2 }" var="list2">
				<div class="goodsItem">
					<a href="commdity_servlet?cId=${list2.cId }" ><img src="${list2.uiImage}"
						alt="运动服韩版时尚男" class="goodsimg" /></a><br />
						<a href="commdity_servlet?cId=${list2.cId }"  title="运动服韩版时尚男" style="font-size:14px;">${list2.cName }</a>
				         <br /> <font style="font-size:14px;margin-top:25px;">售价：</font><font class="f1">￥${list2.dPrice}</font>
				</div>
				</c:forEach>
			</div>
		</div>
		<div class="blank"></div>
		<div class="xm-box">
			<h4 class="title">
				<span>乐町品牌</span> <a class="more" href="search.php?intro=hot">更多</a>
			</h4>
			<div id="show_hot_area" class="clearfix">
			    <c:forEach items="${list3}" var="list3">
				<div class="goodsItem">
					<a href="commdity_servlet?cId=${list3.cId }"><img src="${list3.uiImage}"
						alt="黑色时尚高跟短靴女" class="goodsimg" /></a><br />
						<a href="commdity_servlet?cId=${list3.cId }" title="黑色时尚高跟短靴女" style="font-size:14px;">${list3.cName }.</a>
				         <br /><font style="font-size:14px;margin-top:25px;"> 售价：</font><font class="f1">￥${list3.dPrice}</font>
				</div>
				</c:forEach>
			</div>
			<div class="blank"></div>
		</div>
	</div>
	<div id="returntop">
		<jsp:include page="returntop.jsp"></jsp:include>
	</div>
	<div id="end_div" style="margin-top:10px;">
		<jsp:include page="end.jsp"></jsp:include>
	</div>
</body>
</html>